﻿<%@ Page Title="Core Features" Language="C#" MasterPageFile="~/Demo.master" Inherits="DemoPage" %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>

<script runat="server">
    protected void OnSpeedChanged(object sender, EventArgs e)
    {
        if (SpeedDropDown.SelectedIndex == 0)
        {
            speedValueID.Visible = true;
        }
        else
            speedValueID.Visible = false;
    }

    protected void OnUpdate(object sender, EventArgs e)
    {
        int speed = int.MinValue;
        int.TryParse(txtSpeed.Text, out speed);


        if (EffectDropDown.SelectedValue.ToLower() != "none")
            SampleEffect.EffectType = (JQueryEffects)Enum.Parse(typeof(JQueryEffects), EffectDropDown.SelectedValue);

        if (SpeedDropDown.SelectedIndex != 0)
            SampleEffect.Speed = (Speeds)Enum.Parse(typeof(Speeds), SpeedDropDown.SelectedValue);
        else
        {
            if (speed != int.MinValue)
            {
                SampleEffect.SpeedValue = speed;
            }
        }

        if (MethodDropDown.SelectedValue.ToLower() != "none")
            SampleEffect.EffectMethod = (JQueryEffectMethods)Enum.Parse(typeof(JQueryEffectMethods), MethodDropDown.SelectedValue);
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="DemoHolder" runat="Server">
    <div class="dna-state-info ui-corner-all" style="margin-bottom: 10px;">
        The Effect control's has no runtime ui.It's usage just like Extender Control.Just
        set the TargetID to the TargetControl and set EffectType.
    </div>
    <br />
    <br />
    <div style="height: 200px; padding: 30px; border: solid 1px #f3f3f3; position: absolute;
        float: left; width: 250px">
        <asp:Panel runat="server" ID="EffectPanel" class="ui-widget-content ui-corner-all"
            Width="200" Height="200">
            <h6 class="ui-widget-header ui-corner-all">
                Effect</h6>
            <p style="padding: 10px">
                This is the panel 's body
            </p>
        </asp:Panel>
    </div>
    <br />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div style="position: absolute; float: left; left: 350px; margin-top: 10px; display: block;
                height: 300px;">
                <input id="triggerInput" type="button" value="Run Effect" />
                <div style="float: left;">
                    <h6>
                        <b>Properties:</b></h6>
                    <div class="dna-demo-fields">
                        <ul>
                            <li><span>EffectType:</span><asp:DropDownList ID="EffectDropDown" runat="server"
                                Width="200">
                                <asp:ListItem Text="None" Value="None" />
                                <asp:ListItem Text="Blind" Value="Blind" />
                                <asp:ListItem Text="Bounce" Value="Bounce" />
                                <asp:ListItem Text="Clip" Value="Clip" />
                                <asp:ListItem Text="Drop" Value="Drop" />
                                <asp:ListItem Text="Explode" Value="Explode" />
                                <asp:ListItem Text="Fold" Value="Fold" />
                                <asp:ListItem Text="Highlight" Value="Highlight" />
                                <asp:ListItem Text="Pulsate" Value="Pulsate" />
                                <asp:ListItem Text="Scale" Value="Scale" />
                                <asp:ListItem Text="Shake" Value="Shake" />
                                <asp:ListItem Text="Slide" Value="Slide" />
                                <asp:ListItem Text="Transfer" Value="Transfer" />
                            </asp:DropDownList>
                            </li>
                            <li><span>EffectMethod:</span><asp:DropDownList ID="MethodDropDown" runat="server"
                                Width="200">
                                <asp:ListItem Text="None" Value="none" />
                                <asp:ListItem Text="Show" Value="show" />
                                <asp:ListItem Text="Hide" Value="hide" />
                                <asp:ListItem Text="Toggle" Value="toggle" />
                                <asp:ListItem Text="SlideDown" Value="slideDown" />
                                <asp:ListItem Text="SlideUp" Value="slideUp" />
                                <asp:ListItem Text="SlideToggle" Value="slideToggle" />
                                <asp:ListItem Text="FadeIn" Value="fadeIn" />
                                <asp:ListItem Text="FadeOut" Value="fadeOut" />
                                <asp:ListItem Text="FadeTo" Value="fadeTo" />
                            </asp:DropDownList>
                            </li>
                            <li id="speedID" runat="server"><span>Speed</span><asp:DropDownList ID="SpeedDropDown"
                                runat="server" Width="200" OnSelectedIndexChanged="OnSpeedChanged" AutoPostBack="true">
                                <asp:ListItem Text="Custom" Value="custom" />
                                <asp:ListItem Text="Slow" Value="Slow" />
                                <asp:ListItem Text="Normal" Selected="True" Value="Normal" />
                                <asp:ListItem Text="Fast" Value="Fast" />
                            </asp:DropDownList>
                            </li>
                            <li id="speedValueID" runat="server" visible="false"><span>SpeedValue:</span><asp:TextBox
                                ID="txtSpeed" runat="server"></asp:TextBox></li>
                            <li>
                                <asp:Button ID="Button1" runat="server" Text="Apply" OnClick="OnUpdate" /></li>
                        </ul>
                    </div>
                </div>
            </div>
            <DotNetAge:Effect ID="SampleEffect" runat="server" EffectType="Slide" TriggerEvent="Click"
                OnClientCallBack="reset();" EffectMethod="toggle">
                <Trigger TargetID="triggerInput" />
                <Target TargetID="EffectPanel" />
            </DotNetAge:Effect>
        </ContentTemplate>
    </asp:UpdatePanel>

    <script type="text/javascript">
        function reset() {
            var breakPoint = 0;
        }
    </script>

    <br />
    <div style="top: 450px; position: absolute;">
        <demo:Code runat="server" ID="codeView" SourceFile="~/Effect/Codes/CoreSample.aspx" />
    </div>
</asp:Content>
